<template>
	<div class="add_live_wrap w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<button @click="cancel"><i><&nbsp;</i>返回</button>
			<p>{{addOrTitle}}</p>
		</div>
		<div class="add_live_line">
			<span class="tit">直播名称：</span>
			<input type="text" v-model="name" maxlength="20"/>
		</div>
		<div class="add_live_line">
			<div class="left">
				<span class="tit">讲师：</span>
				<input type="text" v-model="lecturer"/>
			</div>
			<div class="left marL">
				<span class="tit">频道密码：</span>
				<input type="text" v-model="lecturerChannelPass"/>
			</div>
		</div>
		<div class="add_live_line">
			<div class="left">
				<span class="tit">助教：</span>
				<input type="text" v-model="assistant"/>
			</div>
			<div class="left marL">
				<span class="tit">频道密码：</span>
				<input type="text" v-model="assistantChannelPass"/>
			</div> 
		</div>
		<div class="add_live_line">
			<span class="tit">直播时间：</span>
			<el-date-picker v-model="starttime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>	
		</div>
		<div class="add_live_line">
			<span class="tit">直播介绍：</span>
			<vue-ueditor-wrap v-model="introduce" :config="myConfig" style="margin: 14px 0 0 85px;"></vue-ueditor-wrap>
		</div>
		<div class="add_live_line">
			<span class="tit">是否报名：</span>
			<el-switch class="switchStyle" v-model="isSignUp" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0"></el-switch>
		</div>
		<div class="add_live_line">
			<span class="tit">播放器设置：</span>
			<el-switch class="switchStyle" v-model="isBofangOpen" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" @change="bofangChange"></el-switch>
			<em class="tishi">默认通用设置，开启之后可设置当前直播播放器logo水印</em>
			<div class="bofangqiSet" v-show="bofangqiSet">
				<div class="add_live_line platformLogo">
					<span class="tit">直播图标：</span>
					<div class="platformImg">
						<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
							<img v-if="logo" :src="logo" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
						</el-upload>
					</div>
					<em class="tishi">为了保证显示效果，请上传不大于 140 x 50 大小的图片，支持jpg、jpeg、png格式，文件大小不超过 2M</em>
				</div>
				<div class="add_live_line">
					<span class="tit">logo位置：</span>
					<el-radio-group v-model="playerPosition" style="position: absolute;top: 1px;left: 118px;">
						<el-radio label="tl" name="position">左上角</el-radio>
						<el-radio label="bl" name="position">左下角</el-radio>
						<el-radio label="tr" name="position">右上角</el-radio>
						<el-radio label="br" name="position">右下角</el-radio>
					</el-radio-group>
				</div>
				<div class="add_live_line">
					<span class="tit" style="position: relative;top: -9px">logo透明度：</span>
					<slider :min="0" :max="100" v-model="playerOpacity" :parentmsg="nowType" v-if="toChildFlag"></slider>
				</div>
				<!-- <div class="add_live_line">
					<span class="tit">弹幕功能：</span>
					<el-switch class="switchStyle" v-model="barrage" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0"></el-switch>
				</div> -->
			</div>
		</div>
		<div class="add_live_line">
			<span class="tit">防录屏跑马灯：</span>
			<el-switch class="switchStyle" v-model="isHorseOpen" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" @change="horseChange"></el-switch>
			<em class="tishi">注意：移动web端全屏播放时，会导致跑马灯失效</em>
			<div class="fanglupingSet" v-show="fanglupingSet">
				<div class="add_live_line">
					<span class="tit">自定义内容：</span>
					<input type="text" v-model="horseUsername" placeholder="请输入自定义内容" />
				</div>
				<div class="add_live_line">
					<span class="tit">字体大小：</span>
					<input type="text" v-model="horseFontSize"/>
				</div>
				<div class="add_live_line">
					<span class="tit" style="position: relative;top: -16px;">字体颜色：</span>
					<el-color-picker v-model="color"></el-color-picker>
				</div>
				<div class="add_live_line">
					<span class="tit" style="position: relative;top: -9px;">跑马灯透明度：</span>
					<horse :min="0" :max="100" v-model="horseAlpha" :parentmsg="nowType" v-if="toChildFlag"></horse>
				</div>
				<div class="add_live_line">
					<span class="tit">显示方式：</span>
					<el-radio-group v-model="horseSetting" style="position: absolute;top: 1px;left: 118px;">
						<el-radio label="1" name="horse">滚动</el-radio>
						<el-radio label="2" name="horse">闪烁</el-radio>
					</el-radio-group>
				</div>
			</div>
		</div>
		<div class="footerButton">
			<a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
			<a @click="cancel" class="cancel">取消</a>
		</div>
	</div>
</template>

<script>
	import slider from '../../components/progress';
	import horse from '../../components/progressHorse';
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				clickLock:true,
        		isBofangOpen:'',
        		bofangqiSet:false,
        		isHorseOpen:'',
        		fanglupingSet:false,

				addOrTitle:'添加直播',
				updateTitleCourse:'',
				teacherTitle:'',
				lecturerid:'',
				nowType:'',	
				toChildFlag:false,
				id:'',
				channelId:'',

				name:'',
				logo:'',
				lecturer:'',
				lecturerChannelPass:'',
				assistant:'',
				assistantChannelPass:'',
				starttime:'',
				introduce:'',
				isSignUp:'',
				courseId:'',
				liveType:'',
				rootcompanyid:'',
				userId:'',
				type:'',

				playerLogo:'',
				playerPosition:'',
				playerOpacity:'',
				barrage:'',
				playerHref:'',
				horseUsername:'',
				horseFontSize:'22',
				color:'#333',
				horseSetting:'',
				horseAlpha:'',
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId},
				myConfig: {
					autoHeightEnabled: false,
					initialFrameHeight: 420,
					initialFrameWidth: '840'
				}
			}
		},
		components:{
			slider,
			horse
		},
		methods:{
			getParams() {
				let that = this;
				var routerParams = this.$route.params.type;
				this.courseId = this.$route.params.liveId;
				this.liveType = this.$route.params.liveType;
				this.updateTitleCourse = this.$route.params.updateTitleCourse;
				this.pathKey = this.$route.params.pathKey;
				this.teacherTitle = this.$route.params.teacherTitle;
				this.lecturerid = this.$route.params.lecturerid;
				if(routerParams == 'edit') {
					that.nowType = 'edit';
					that.addOrTitle = "编辑直播";
				} else {
					that.nowType = 'add';
				}
				console.log('添加直播:',this.$route.params);
			},
			increase() {
        		this.percentage += 0.1;
        		if (this.percentage > 1) {
          			this.percentage = 1;
        		}
      		},
      		decrease() {
        		this.percentage -= 0.1;
        		if (this.percentage < 0) {
          			this.percentage = 0;
        		}
      		},
      		bofangChange(){
      			if(this.isBofangOpen==1){
      				this.bofangqiSet = true;
      			}else{
					this.bofangqiSet = false;
					this.logo = '';
					this.playerPosition = '';
					this.playerOpacity = '';
					// this.barrage = 0;
				}
      		},
      		horseChange(){
      			if(this.isHorseOpen==1){
      				this.fanglupingSet = true;
      			}else{
					this.fanglupingSet = false;
					this.horseUsername = '';
					this.horseSetting = '';
					this.horseAlpha = '';
				}
      		},
			addNews(){
				let that = this;
				if(this.isBofangOpen==0){
					this.playerOpacity='';
				};
				if(this.isHorseOpen==0){
					this.horseFontSize = '';
					this.color = '';
					this.horseAlpha='';
				};
				let s = {
					name:that.name,
					lecturer:that.lecturer,
					lecturerChannelPass:that.lecturerChannelPass,
					assistant:that.assistant,
					assistantChannelPass:that.assistantChannelPass,
					startTime:that.starttime,
					introduce:that.introduce,
					isSignUp:that.isSignUp,
					courseId:that.courseId,
					rootcompanyid:that.courseCompanyid,
					userId:this.$root.userInfoMsg.id,
					type:this.liveType,
					playerLogo:that.logo,
					playerPosition:that.playerPosition,
					playerOpacity:that.playerOpacity/100,
					barrage:0,
					playerHref:'',
					horseUsername:that.horseUsername,
					horseFontSize:that.horseFontSize,
					horseFontColor:that.color,
					horseSetting:that.horseSetting,
					horseAlpha:that.horseAlpha/100  
				};
				if(this.isBofangOpen==1){
					if(this.logo==''||this.playerPosition==''||this.playerOpacity==''){
						this.$refs.alert.show({alertText: '播放器设置后参数不全！',alertSubmit:function(){alertStatus: 0}});
					};
				};
				if(this.isHorseOpen==1){
					if(this.horseUsername==''||this.horseAlpha==''){
						this.$refs.alert.show({alertText: '防录屏跑马灯设置后参数不全！',alertSubmit:function(){alertStatus: 0}});
					}
				};
				if(this.clickLock==true){
					this.clickLock = false;
					this.$ajax({
						url: this.$root.jifuUrl + '/addCourseLiveBroadcast',
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if (res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功',alertSubmit:function(){alertStatus: 0}});
								setTimeout(() =>{
									this.$router.push({
										name: this.liveType,
										params: {
											liveId:this.courseId,
											updateTitle:this.updateTitleCourse,
											pathKey:this.pathKey,
											teacherTitle:this.teacherTitle,
											lecturerid:this.lecturerid
										}
									})
								},2000)
							}else{
								this.clickLock = true;
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				};
			},
			updateNews() {
				//编辑咨询
				let that = this;
				let s = {
					id:that.id,
					name:that.name,
					logo:that.logo,
					lecturer:that.lecturer,
					lecturerChannelPass:that.lecturerChannelPass,
					assistant:that.assistant,
					assistantChannelPass:that.assistantChannelPass,
					startTime:that.starttime,
					introduce:that.introduce,
					isSignUp:that.isSignUp,
					courseId:that.courseId,
					rootcompanyid:that.courseCompanyid,
					channelId:that.channelId,

					playerLogo:that.logo,
					playerPosition:that.playerPosition,
					playerOpacity:that.playerOpacity/100,
					barrage:0,
					playerHref:'',
					horseUsername:that.horseUsername,
					horseFontSize:that.horseFontSize,
					horseFontColor:that.color,
					horseSetting:that.horseSetting,
					horseAlpha:that.horseAlpha/100
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/updateCourseLiveBroadcast',
					method: 'POST',
					data: this.qs.stringify(s),
					success: res => {
						if (res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功',alertSubmit:function(){alertStatus: 0}});
							setTimeout(() =>{
								this.$router.push({
									name: this.liveType,
									params: {
										liveId:this.courseId,
										updateTitle:this.updateTitleCourse,
										pathKey:this.pathKey,
										teacherTitle:this.teacherTitle,
										lecturerid:this.lecturerid
									}
								})
							},2000)
						}else{
							this.clickLock = true;
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave() {
				let that = this;
				if (that.nowType == 'add') {
					that.addNews();
				} else if (that.nowType == 'edit') {
					this.updateNews();
				}
			},
			cancel() {
				this.$router.push({
					name: this.liveType,
					params: {
						liveId:this.courseId,
						updateTitle:this.updateTitleCourse,
						pathKey:this.pathKey,
						teacherTitle:this.teacherTitle,
						lecturerid:this.lecturerid
					}
				})
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.logo = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		},
		components:{
			alert
		},
		mounted(){
			this.getParams();
			if(this.courseId==null){
				this.$store.commit('GET_newLiveColumn');
				var s =this.$store.state.newLiveColumn;
				this.courseId = s.courseId;
				this.liveType=s.liveType;
				this.updateTitleCourse = s.updateTitleCourse;
				this.teacherTitle = s.teacherTitle;
				this.lecturerid = s.lecturerid;
			};
			if(this.nowType=="edit"){
				console.log('306',this.nowType,this.$root.columnToNewLive);
				this.id = this.$root.columnToNewLive.id;
				this.name = this.$root.columnToNewLive.name;
				this.lecturer = this.$root.columnToNewLive.lecturer;
				this.lecturerChannelPass = this.$root.columnToNewLive.lecturerChannelPass;
				this.assistant = this.$root.columnToNewLive.assistant;
				this.assistantChannelPass = this.$root.columnToNewLive.assistantChannelPass;
				this.starttime = this.$root.columnToNewLive.starttime;
				this.introduce = this.$root.columnToNewLive.introduce;
				this.isSignUp = this.$root.columnToNewLive.isSignUp;
				this.courseId = this.$root.columnToNewLive.courseid;
				this.courseCompanyid = this.$root.columnToNewLive.rootcompanyid;
				this.userId = this.$root.columnToNewLive.userId;
				this.type = this.$root.columnToNewLive.type;
				this.channelId = this.$root.columnToNewLive.channelid;

				if(this.$root.columnToNewLive.playerPosition!=""){
					this.isBofangOpen = 1;
					this.bofangqiSet = true;
					this.logo = this.$root.columnToNewLive.playerLogo;
					this.playerPosition = this.$root.columnToNewLive.playerPosition;
					this.playerOpacity = this.$root.columnToNewLive.playerOpacity * 100;
// 					if(this.$root.columnToNewLive.barragesss==1){
// 						this.barrage = 1;
// 					}else{
// 						this.barrage = 0
// 					}
				}else{
					this.isBofangOpen = 0;
				};

				if(this.$root.columnToNewLive.horseSetting!=""){
					this.isHorseOpen = 1;
					this.fanglupingSet = true;
					this.horseUsername = this.$root.columnToNewLive.horseUsername;
					this.horseFontSize = this.$root.columnToNewLive.horseFontSize;
					this.color = this.$root.columnToNewLive.horseFontColor;
					this.horseSetting = this.$root.columnToNewLive.horseSetting;
					this.horseAlpha = this.$root.columnToNewLive.horseAlpha * 100;
				}else{
					this.isHorseOpen = 0;
				};
			};
			window.addEventListener("beforeunload",()=>{
				s={
					courseId:this.courseId,
					liveType:this.liveType,
					updateTitleCourse:this.updateTitleCourse,
					teacherTitle:this.teacherTitle,
					lecturerid:this.lecturerid
				}	
				this.$store.commit('SET_newLiveColumn', s);
			});
			setTimeout(() => {
				this.toChildFlag = true
			}, 2000)
		}
	}
</script>

<style>
	.add_live_line{overflow: hidden;margin-bottom: 20px;position: relative;}
	.add_live_line .tit{font-size: 16px;color: #333;width: 113px;display: inline-block;text-align: right;}    
	.add_live_line input{width: 200px;height: 30px;line-height:30px;border: 1px solid #ccc;padding-left: 10px;color: #666;border-radius: 5px;font-size: 14px;}    
	.add_live_line .left{float: left;}
	.add_live_line .left.marL{margin-left: 20px;}
	.add_live_line.platformLogo{height: 85px!important;position: relative;}
	.add_live_line .platformImg{position: absolute;top: 0;left: 118px;}
	.add_live_line .platformImg .avatar-uploader{width: 85px;height: 85px;}
	.add_live_line .platformImg .avatar-uploader img{width: 100%;}
	.add_live_line .platformImg .avatar-uploader-icon{font-size:28px;color:#8c939d;width:85px;height:65px!important;padding-top:20px;text-align:center;background:#f2f2f2;    border-radius: 5px;}
	.add_live_line .platformImg .el-upload i em{font-size:14px;color:#ccc;font-style:normal;text-align:center;display:block;margin-top:6px;} 
	.add_live_line .el-input--prefix .el-input__prefix,.add_live_line .el-input__suffix,.add_live_line .el-input__suffix-inner{width: 30px;color: #ccc;}
	.add_live_line .el-input--prefix .el-input__prefix i{line-height: 32px;}
	.add_live_line .el-date-editor.el-input{width: 212px;}
	.add_live_line .el-date-editor.el-input input{width: 212px;height: 32px;line-height: 32px;}
	.add_live_line .el-radio-group .el-radio__input,.add_live_line .el-radio-group .el-radio__input .el-radio__inner{width: 14px;}
	.add_live_line .el-radio-group .el-radio__label{width: auto!important;}
	.add_live_line .el-select,.add_live_line .el-select input{width: 212px;height: 32px;line-height: 32px;}
	.add_live_line .el-select .el-select__caret{height: 32px;line-height: 32px;}
	.add_live_line .bofangqiSet,.add_live_line .fanglupingSet{margin-top: 20px}
	.add_live_line .tishi{color:#ccc;font-style: normal;font-size: 14px;margin-left:10px;}
	.add_live_line.platformLogo .tishi{position: absolute;top: 0;left: 224px;width: 277px;line-height: 22px;}
</style>